<template>
    <view class="han-custom-tabbar">
        <view
            class="tabbar-item"
            v-for="(item, index) in tabbarList"
            :key="index"
            :class="{
                'tabbar-item-active': current === index,
                'center-button': index === 2
            }"
            @click="handleTabClick(item, index)"
        >
            <!-- 中间特殊按钮 -->
            <view v-if="index === 2" class="plus-container">
                <view class="plus-icon">+</view>
            </view>

            <!-- 常规按钮 -->
            <template v-else>
                <han-icon
                    :name="current === index ? item.selectedIcon : item.icon"
                    size="40"
                />
                <text class="tabbar-text">{{ item.text }}</text>
            </template>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const current = ref(0);

// 路由映射表优化
const TAB_ROUTES = new Map([
    ['/pages/home/home', 0],
    ['/pages/han_culture_library/hanCultureLibrary', 1],
    ['/pages/message/message', 3],
    ['/pages/user/user', 4]
]);

const tabbarList = [
    {
        pagePath: '/pages/home/home',
        text: '首页',
        icon: 'home',
        selectedIcon: 'home_active'
    },
    {
        pagePath: '/pages/han_culture_library/hanCultureLibrary',
        text: '文化库',
        icon: 'han_culture_library',
        selectedIcon: 'han_culture_library_active'
    },
    {
        pagePath: '', // 中间按钮单独处理
        text: ''
    },
    {
        pagePath: '/pages/message/message',
        text: '消息',
        icon: 'message',
        selectedIcon: 'message_active'
    },
    {
        pagePath: '/pages/user/user',
        text: '我的',
        icon: 'my',
        selectedIcon: 'my_active'
    }
];

onMounted(() => {
    uni.$on('onTabPageShow', routeListener);
    routeListener(); // 初始化执行
});

onUnmounted(() => {
    uni.$off('onTabPageShow', routeListener);
});

// 自动路由监听函数
const routeListener = () => {
    const pages = getCurrentPages();
    if (!pages.length) return;

    let routePath = pages[pages.length - 1].route;

    // 统一路径格式
    routePath = routePath.startsWith('/') ? routePath : `/${routePath}`;

    current.value = TAB_ROUTES.get(routePath) ?? current.value;
};

// 点击事件处理
const handleTabClick = (item, index) => {
    if (index === 2) {
        uni.navigateTo({ url: '/pages/post/post' });
        return;
    }

    uni.reLaunch({
        url: item.pagePath,
        success: () => {
            current.value = index;
        }
    });
};
</script>

<style lang="scss">
.han-custom-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background: $han-global-bg-color;
    display: flex;
    z-index: 9999;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px $han-global-shadow-color;
    padding-bottom: env(safe-area-inset-bottom);

    .tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        position: relative;
        transition: all 0.3s;

        &.center-button {
            position: relative;
        }

        .tabbar-text {
            font-size: $han-font-size-sm;
            color: $han-global-secondary-font-color;
        }

        &.tabbar-item-active {
            .tabbar-icon {
                color: $han-primary-color;
            }
            .tabbar-text {
                color: $han-primary-color;
            }
        }
    }

    .plus-container {
        background: linear-gradient(
            45deg,
            $han-primary-color,
            $han-accent-color
        );
        width: $han-button-height-md;
        height: $han-button-height-md;
        border-radius: $han-border-radius-lg;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4rpx 20rpx rgba($han-primary-color, 0.3);

        .plus-icon {
            color: $han-global-bg-color;
            font-size: 64rpx;
            font-weight: 600;
            margin-top: -$han-global-spacing-xs;
        }
    }
}
</style>
